import React from 'react';
import {Bar} from 'react-chartjs-2';
import {Button, Card, CardActions, CardContent, CardHeader, Divider, makeStyles} from '@material-ui/core';
import {ArrowDropDown, ArrowRight} from '@material-ui/icons';

import {data, options} from './chart';

const useStyles = makeStyles(theme => ({
    root: {
        boxShadow: theme.shadows[2]
    },
    chartContainer: {
        height: 400,
        position: 'relative'
    },
    actions: {
        justifyContent: 'flex-end'
    }
}));

export default props => {
    const classes = useStyles();

    return (
        <Card className={classes.root}>
            <CardHeader
                action={
                    <Button size="small" variant="text">
                        Last 7 days <ArrowDropDown/>
                    </Button>
                }
                title="Latest Sales"
            />
            <Divider/>
            <CardContent>
                <div className={classes.chartContainer}>
                    <Bar data={data} options={options}/>
                </div>
            </CardContent>
            <Divider/>
            <CardActions className={classes.actions}>
                <Button color="primary" size="small" variant="text">
                    Overview <ArrowRight/>
                </Button>
            </CardActions>
        </Card>
    );
};